<template>
	<view class="content">
		<map @markertap='showDetail' @labeltap='showDetail' :markers='markers' :latitude="clatitude"
			:longitude="clongitude" style="width: 100%;height: 100vh;"></map>

		<!-- <cover-cover-view @click="shopDetail(item.stationId)" class="rowbox wdh-100 s-box spb als"
			v-for="(item,index) in curStore" :key='index'>
			<cover-cover-image mode="aspectFill" class="s-img" :src="item.img">
			</cover-cover-image>
			<cover-cover-view class="columnbox als s-info">
				<cover-cover-view class="rowbox wdh-100 jus">
					<cover-cover-view class="s-name cover-viewovflow">{{item.name}}</cover-cover-view>
					<cover-cover-view class="rowbox s-qj" v-if="item.stationType==0">旗舰站</cover-cover-view>
					<cover-cover-view class="rowbox s-jm" v-else-if="item.stationType==1">标准站</cover-cover-view>
					<cover-cover-view class="rowbox s-zz" v-else-if="item.stationType==2">自助站</cover-cover-view>
					<cover-cover-view class="rowbox s-zd" v-else-if="item.stationType==3">自动站</cover-cover-view>
				</cover-cover-view>
				<cover-cover-view class="rowbox wdh-100 jus">
					<cover-cover-view class="rowbox s-zd-status" v-if="item.zdDoor>0">
						<cover-cover-view class="s-zd-status-title rowbox">自动</cover-cover-view>
						<cover-cover-view class="s-zd-status-detail">闲{{item.zdDoorKx}}
							<cover-view>/{{item.zdDoor}}</cover-view>
						</cover-cover-view>
					</cover-cover-view>
					<cover-cover-view class="rowbox s-zd-status zz-status" v-if="item.zzDoor>0">
						<cover-cover-view class="s-zd-status-title rowbox" style="background: #7728F5;">自助</cover-cover-view>
						<cover-cover-view class="s-zd-status-detail" style="color: #7728F5;">闲{{item.zzDoorKx}}
							<cover-view style="color: #a971f4;">/{{item.zzDoor}}</cover-view>
						</cover-cover-view>
					</cover-cover-view>
					<cover-cover-view class="rowbox s-zd-status" style="background: #fbeada;" v-if="item.rgDoor>0">
						<cover-cover-view class="s-zd-status-title rowbox" style="background: #E99D42;">人工</cover-cover-view>
						<cover-cover-view class="s-zd-status-detail" style="color:  #E99D42;">闲{{item.rgDoorKx}}
							<cover-view style="color: #f5c499;">/{{item.rgDoor}}</cover-view>
						</cover-cover-view>
					</cover-cover-view>
				</cover-cover-view>
				<cover-cover-view class="rowbox wdh-100 spb" style="margin-top: 20rpx;">
					<cover-cover-view class="s-address cover-viewovflow" style="width: 240rpx;">{{item.address}}</cover-cover-view>
					<cover-cover-view class="s-address">{{item.distance>1000?item.distance/1000+'KM':(item.distance+'M')}}
					</cover-cover-view>
					<cover-cover-view class="rowbox location-box" @click.stop="showMap(item)">
						<cover-cover-image src="/static/img/location.svg"></cover-cover-image>
						导航
					</cover-cover-view>
				</cover-cover-view>
			</cover-cover-view>
		</cover-cover-view> -->


		<cover-view class="search-box rowbox spb">
			<cover-view class="rowbox">
				<cover-view class="search-city cover-viewovflow rowbox ">
					{{city}}
				</cover-view>
				<u-icon name="arrow-down" size="24rpx" color="#212121"></u-icon>
			</cover-view>
			<cover-view class="rowbox search-input">
				<input confirm-type="search" @confirm="searchInfo" v-model="searchName" class="search-input-box"
					placeholder="搜索洗车站名称" />
			</cover-view>
		</cover-view>

		<cover-view @click="shopDetail(item.stationId)" class="columnbox s-box jus" v-for="(item,index) in curStore"
			:key='index'>
			<cover-view class="rowbox wdh-100 spb als">
				<cover-image mode="aspectFill" class="s-img" :src="item.img">
				</cover-image>
				<cover-view class="columnbox wdh-100 spb s-info">
					<cover-view class="rowbox wdh-100 jus">
						<cover-view class="s-name cover-viewovflow">{{item.name}}</cover-view>
						<cover-view class="rowbox  type-box">
							<cover-view class="rowbox s-qj" v-if="item.stationType==0">旗舰站</cover-view>
							<cover-view class="rowbox s-jm" v-else-if="item.stationType==1">标准站</cover-view>
							<cover-view class="rowbox s-zz" v-else-if="item.stationType==2">自助站</cover-view>
							<cover-view class="rowbox s-zd" v-else-if="item.stationType==3">自动站</cover-view>
						</cover-view>
					</cover-view>
					<cover-view class="rowbox wdh-100 spb" style="margin-top: 24rpx;">
						<cover-view class="s-address cover-viewovflow"
							style="width: 240rpx;">{{item.address}}</cover-view>
						<cover-view class="s-address" style="margin-left: 20rpx;">
							{{item.distance>1000?item.distance/1000+'KM':(item.distance+'M')}}
						</cover-view>
					</cover-view>
				</cover-view>
			</cover-view>
			<cover-view class="rowbox spb wdh-100 s-door-info">
				<cover-view class="rowbox jus">
					<cover-view class="rowbox s-zd-status" v-if="item.doors[stationType.zd].split('/')[0]>0">
						<cover-view class="s-zd-status-title rowbox">自动</cover-view>
						<cover-view class="s-zd-status-detail rowbox">闲{{item.doors[stationType.zd].split('/')[0]}}
							<cover-view>/{{item.doors[stationType.zd].split('/')[1]}}</cover-view>
						</cover-view>
					</cover-view>
					<cover-view class="rowbox s-zd-status zz-status" v-if="item.doors[stationType.zz].split('/')[0]>0">
						<cover-view class="s-zd-status-title rowbox" style="background: #00DCA9;">自助</cover-view>
						<cover-view class="s-zd-status-detail rowbox"
							style="color: #00DCA9;">闲{{item.doors[stationType.zz].split('/')[0]}}
							<cover-view>/{{item.doors[stationType.zz].split('/')[1]}}</cover-view>
						</cover-view>
					</cover-view>
					<cover-view class="rowbox s-zd-status" style="background: #fdf6e3;"
						v-if="item.doors[stationType.rg].split('/')[0]>0">
						<cover-view class="s-zd-status-title rowbox" style="background: #E99D42;">人工</cover-view>
						<cover-view class="s-zd-status-detail rowbox"
							style="color:#EAB300;">闲{{item.doors[stationType.rg].split('/')[0]}}
							<cover-view>/{{item.doors[stationType.rg].split('/')[1]}}</cover-view>
						</cover-view>
					</cover-view>
				</cover-view>
				<cover-view class="rowbox location-box" @click.stop="showMap(item)">
					<cover-image class="location-img" src="/static/img/s-location.png"></cover-image>
					导航
				</cover-view>
			</cover-view>
		</cover-view>

		<tabBar :value='1'></tabBar>
	</view>
</template>

<script>
	import tabBar from '@/components/tabbar/tabbar.vue'
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				latitude: 38.024091,
				longitude: 114.544842,
				clatitude: 38.024091,
				clongitude: 114.544842,
				markers: [],
				stationList: [],
				curStore: [],
				city: '',
				searchName: '',
				stationType: {
					zd: 0,
					zz: 1,
					rg: 2
				}
			};
		},
		onLoad() {
			this.city = uni.getStorageSync('city')
			uni.hideTabBar()
			uni.getSetting({
				success: res => {
					var authList = res.authSetting;
					console.log(authList);
					if (authList['scope.userLocation']) {
						if (!authList['scope.userLocation']) {
							console.log("未得到位置权限");
						} else {
							uni.getLocation({
								success: (res) => {
									this.latitude = res.latitude
									this.longitude = res.longitude
									this.getStation()
								},
								fail: (err) => {
									this.getStation()
								}
							})
						}
					} else {
						console.log("暂未授权");
						uni.getLocation({
							success: (res) => {
								this.latitude = res.latitude
								this.longitude = res.longitude
								this.getStation()
							},
							fail: (err) => {
								this.getStation()
							}
						})
					}
				},
			});
		},
		onShow() {

		},
		methods: {
			searchInfo() {
				this.markers = []
				this.curStore = []
				this.$req.get('/xcx/station/list/name', {
					cityId: uni.getStorageSync('cityId'),
					name: this.searchName,
					lng: this.longitude,
					lat: this.latitude,
				}).then(res => {
					if (res.data.rows.length > 0) {
						res.data.rows.forEach((resp, index) => {
							resp.img = JSON.parse(resp.listUrl)[0].url
							this.markers.push({
								latitude: resp.lat,
								longitude: resp.lng,
								label: {
									content: resp.name,
									bgColor: '#fff',
									padding: 10,
									borderRadius: 4
								},
								id: index
							})
						})
						this.clatitude = this.stationList[0].lat
						this.clongitude = this.stationList[0].lng
						this.curStore = [{
							...this.stationList[0]
						}]
					}
				})
			},
			showMap(v) {
				uni.openLocation({
					latitude: Number(v.lat),
					longitude: Number(v.lng),
					name: v.name
				})
			},
			getStation() {
				this.$req.get('/xcx/station/list/stationType', {
					pageSize: 50,
					pageNum: 1,
					lng: this.longitude,
					lat: this.latitude,
					cityId: uni.getStorageSync('cityId'),
					stationType: -1
				}).then(res => {
					if (res.data.rows) {
						this.stationList = res.data.rows
						if (res.data.rows.length > 0) {
							res.data.rows.forEach((resp, index) => {
								resp.img = JSON.parse(resp.listUrl)[0].url
								this.markers.push({
									latitude: resp.lat,
									longitude: resp.lng,
									label: {
										content: resp.name,
										bgColor: '#fff',
										padding: 10,
										borderRadius: 4
									},
									id: index
								})
							})
							this.clatitude = this.stationList[0].lat
							this.clongitude = this.stationList[0].lng
							this.curStore = [{
								...this.stationList[0]
							}]
						}
					}
				})
			},
			showDetail(e) {
				this.curStore = [{
					...this.stationList[e.detail.markerId]
				}]
			},
			//商家详情
			shopDetail(id) {
				uni.navigateTo({
					url: '/pages/store/detail?id=' + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-family: PingFang SC;
	}

	.s-box {
		padding: 24rpx;
		background: #fff;
		border-radius: 24rpx;
		position: fixed;
		bottom: 132px;
		left: 20rpx;
		width: 710rpx;

		.s-img {
			width: 160rpx;
			height: 98rpx;
			border-radius: 12rpx;
			margin-right: 16rpx;
		}

		.s-info {
			width: 490rpx;
			position: relative;

			.s-name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #000000;
				width: 200rpx;
			}

			.type-box {
				position: absolute;
				top: -24rpx;
				right: -24rpx;
			}
		}

		.s-door-info {
			border-top: #F6F6F6 solid 1px;
			width: 100%;
			margin-top: 16rpx;
			padding-top: 16rpx;
		}

		.s-zz,
		.s-jm,
		.s-zd,
		.s-qj {
			background: #5233C9;
			color: #fff;
			margin-right: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 20rpx;
			color: #FFFFFF;
			padding: 4rpx 8rpx;
			border-radius: 0px 0px 8rpx 8rpx;
		}

		.s-jm {
			background: #56A7AD;
			color: #fff;
		}

		.s-zd {
			background: #EAB300;
		}

		.s-qj {
			background: #00DCA9;
		}

		.s-zd-status {
			background: #e2edf7;
			border-radius: 8rpx;
			margin-right: 16rpx;


			.s-zd-status-title {
				background: #126BC9;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 20rpx;
				color: #FFFFFF;
				padding: 4rpx 8rpx;
				border-radius: 8rpx;
				white-space: nowrap;

			}

			.s-zd-status-detail {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #126BC9;
				padding: 4rpx 8rpx;
				white-space: nowrap;
			}
		}

		.zz-status {
			background: #dffaf5;
		}

		.s-address {
			font-family: PingFang SC, PingFang SC;
			font-size: 24rpx;
			color: #72778A;
		}

		.location-box {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 24rpx;
			color: #126BC9;

			.location-img {
				width: 28rpx;
				height: 28rpx;
				margin-right: 4rpx;
			}
		}
	}

	.search-box {
		width: 690rpx;
		height: 88rpx;
		background: #FFFFFF;
		box-shadow: 12rpx 18rpx 30rpx 0px rgba(0, 0, 0, 0.1);
		border-radius: 24rpx;
		position: fixed;
		top: 40rpx;
		left: 30rpx;
		padding: 0 24rpx;

		.search-city {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 28rpx;
			color: #212121;
			margin-right: 20rpx;
			max-width: 150rpx;
		}

		.search-input {
			width: 500rpx;
			height: 56rpx;
			background: #F6F6F6;
			border-radius: 28rpx;
			padding: 0 16rpx;
		}

		.search-input-box {
			width: 100%;
			font-family: PingFang SC, PingFang SC;
			font-size: 24rpx;
			cover-view-align: left;
		}
	}
</style>